<template>
  <div>
    <el-upload
      class="upload-demo"
      action="#"
      list-type="picture"
      :multiple="multiple"
      :http-request="upload"
      :on-change="onChange"
      :file-list="fileList"
      :on-remove="onRemove"
    >
      <el-button size="small" type="primary">点击更换</el-button>
    </el-upload>
    <el-button
      size="small"
      type="primary"
      @click="handleUpload"
      v-if="fileList.length > 0"
      >确认上传</el-button
    >
  </div>
</template>

<script>
export default {
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },

  mounted() {
    console.log("123");
  },

  methods: {
    upload() {},
    // 修改
    onChange(file, fileList) {
      this.fileList = [...fileList];
      console.log(fileList);
    },
    // 删除
    onRemove(file, fileList) {
      this.fileList = [...fileList];
    },
    //上传完成
    handleUpload() {
      if (this.multiple) {
        //清空数据
        this.element.propValue = [];
        this.fileList.forEach((item) => {
          this.element.propValue.push({
            label: item.name,
            url: item.url,
          });
        });
      } else {
        this.element.propValue = this.fileList[0].url;
      }
      this.$message.success("上传成功");
      this.fileList = [];
    },
  },
};
</script>
<style lang="less"></style>
